<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 知识库管理</title>
    <link rel="stylesheet" th:href="@{/css/knowledge-base.css}">
</head>
<body>
    <div class="container">
        <!-- 导航栏 -->
        <nav class="navbar">
            <div class="nav-brand">
                <span>AI 智能助手</span>
            </div>
            <div class="nav-links">
                <a th:href="@{/pages/chat}" class="nav-link">
                    <span>AI 对话</span>
                </a>
                <a th:href="@{/pages/knowledge-base}" class="nav-link active">
                    <span>知识库</span>
                </a>
            </div>
        </nav>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 文档列表区域 -->
            <div class="documents-section">
                <div class="section-header">
                    <h2>文档列表</h2>
                    <div class="section-actions">
                        <button id="openUploadModal" class="action-btn">
                            上传文档
                        </button>
                        <button id="openSearchModal" class="action-btn">
                            向量搜索
                        </button>
                        <button id="refreshBtn" class="action-btn">
                            刷新
                        </button>
                    </div>
                </div>
                <div class="documents-container">
                    <div class="table-container">
                        <table class="documents-table" id="documentsTable">
                            <thead>
                                <tr>
                                    <th>文档名称</th>
                                    <th>文件类型</th>
                                    <th>文件大小</th>
                                    <th>片段数量</th>
                                    <th>状态</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="documentsTableBody">
                                <!-- 文档列表将在这里显示 -->
                            </tbody>
                        </table>
                    </div>
                    <div class="loading" id="documentsLoading" style="display: none;">
                        <span>加载中...</span>
                    </div>
                    <div class="empty-state" id="emptyState" style="display: none;">
                        <h3>暂无文档</h3>
                        <p>请上传您的第一个文档开始构建知识库</p>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 文档上传弹框 -->
    <div class="modal" id="uploadModal" style="display: none;">
        <div class="modal-content modal-large">
            <div class="modal-header">
                <h3>文档上传</h3>
                <button class="modal-close" id="uploadModalClose">
                    ×
                </button>
            </div>
            <div class="modal-body">
                <div class="upload-area" id="uploadArea">
                    <div class="upload-content">
                        <h3>拖拽文件到此处或点击上传</h3>
                        <p>支持 PDF, DOC, DOCX, TXT, MD 等格式</p>
                        <input type="file" id="fileInput" accept=".pdf,.doc,.docx,.txt,.md" multiple hidden>
                        <button class="upload-btn" id="uploadBtn">
                            选择文件
                        </button>
                    </div>
                </div>
                <div class="upload-progress" id="uploadProgress" style="display: none;">
                    <div class="progress-bar">
                        <div class="progress-fill" id="progressFill"></div>
                    </div>
                    <span class="progress-text" id="progressText">0%</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 向量搜索弹框 -->
    <div class="modal" id="searchModal" style="display: none;">
        <div class="modal-content modal-large">
            <div class="modal-header">
                <h3>向量搜索</h3>
                <button class="modal-close" id="searchModalClose">
                    ×
                </button>
            </div>
            <div class="modal-body">
                <div class="search-container">
                    <div class="search-input-group">
                        <input type="text" id="searchInput" placeholder="输入关键词进行语义搜索..." class="search-input">
                        <button id="searchBtn" class="search-btn">
                            搜索
                        </button>
                    </div>
                    <div class="search-options">
                        <div class="option-group">
                            <label for="topK">结果数量:</label>
                            <input type="number" id="topK" min="1" max="100" placeholder="默认10条" class="number-input">
                        </div>
                        <div class="option-group">
                            <label for="scoreThreshold">相似度阈值:</label>
                            <input type="number" id="scoreThreshold" min="0" max="1" step="0.01" placeholder="默认0.7" class="threshold-input">
                        </div>
                    </div>
                </div>
                <div class="search-results" id="searchResults" style="display: none;">
                    <!-- 搜索结果将在这里显示 -->
                </div>
            </div>
        </div>
    </div>

    <!-- 文档详情弹框 -->
    <div class="modal" id="detailModal" style="display: none;">
        <div class="modal-content modal-large">
            <div class="modal-header">
                <h3>文档详情</h3>
                <button class="modal-close" id="detailModalClose">
                    ×
                </button>
            </div>
            <div class="modal-body">
                <div class="detail-loading" id="detailLoading" style="display: none;">
                    <span>加载中...</span>
                </div>
                <div class="document-detail" id="documentDetail" style="display: none;">
                    <div class="detail-layout">
                        <!-- 左侧：文档基本信息 -->
                        <div class="detail-left">
                            <div class="detail-section">
                                <h4>基本信息</h4>
                                <div class="detail-info">
                                    <div class="info-row">
                                        <span class="info-label">文档名称：</span>
                                        <span class="info-value" id="detailName"></span>
                                    </div>
                                    <div class="info-row">
                                        <span class="info-label">原始名称：</span>
                                        <span class="info-value" id="detailOriginalName"></span>
                                    </div>
                                    <div class="info-row">
                                        <span class="info-label">文件类型：</span>
                                        <span class="info-value" id="detailFileType"></span>
                                    </div>
                                    <div class="info-row">
                                        <span class="info-label">文件大小：</span>
                                        <span class="info-value" id="detailFileSize"></span>
                                    </div>
                                    <div class="info-row">
                                        <span class="info-label">片段数量：</span>
                                        <span class="info-value" id="detailChunkCount"></span>
                                    </div>
                                    <div class="info-row">
                                        <span class="info-label">处理状态：</span>
                                        <span class="info-value" id="detailStatus"></span>
                                    </div>
                                    <div class="info-row">
                                        <span class="info-label">创建时间：</span>
                                        <span class="info-value" id="detailCreatedTime"></span>
                                    </div>
                                    <div class="info-row">
                                        <span class="info-label">更新时间：</span>
                                        <span class="info-value" id="detailUpdatedTime"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 右侧：文档块列表 -->
                        <div class="detail-right">
                            <div class="detail-section">
                                <h4>文档块列表</h4>
                                <div class="chunks-container">
                                    <div class="chunks-list" id="chunksList">
                                        <!-- 文档块列表将在这里显示 -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除确认模态框 -->
    <div class="modal" id="deleteModal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h3>确认删除</h3>
                <button class="modal-close" id="modalClose">
                    ×
                </button>
            </div>
            <div class="modal-body">
                <p>确定要删除文档 "<span id="deleteFileName"></span>" 吗？</p>
                <p class="warning-text">此操作不可撤销！</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" id="cancelDelete">取消</button>
                <button class="btn btn-danger" id="confirmDelete">删除</button>
            </div>
        </div>
    </div>

    <!-- 消息提示 -->
    <div class="toast" id="toast" style="display: none;">
        <div class="toast-content">
            <span class="toast-message"></span>
        </div>
    </div>

    <script th:src="@{/js/knowledge-base.js}"></script>
</body>
</html>